<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/main/dist/css/bootstrap.min.css">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>校园平台模块配置界面</title>
  <style>
    .plat-deploy {
        position: fixed;
        height: 100%;
        width: 100%;
        background: #000;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    
    .plat-deploy-checkbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        height: 600px;
        width: 1300px;
    }
    
    .plat-deploy-checkbox input {
        width: 20px;
        height: 20px;
        margin: 40px 80px 40px 5px;
    }
    
    .plat-deploy-checkbox span {
        width: 100px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        background: #5cadff;
        border-radius: 4px;
        margin: 40px 5px 40px 0px;
    }
    
    .plat-deploy button {
        align-self: flex-end;
        width: 100px;
        height: 50px;
        margin-right: 15%;
        background: #2b85e4;
    }
    .info {
      color: #fff;
    }
    .info span {
      margin: 20px;
      color:red;
    }
</style>
</head>
<body>
  <div class="plat-deploy">
    <div class="plat-deploy-checkbox">
    </div>
    <div class="info">
      <p>基础服务已启动成功...</p>
      其他业务：<span>请先配置，并点击确定按钮。</span>
    </div>
    <button type="button" class="submit btn btn-info">确认</button>
  </div>
  <script src="/main/dist/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    let timer = ''
    $(function(){
      initData()
    })
    // 加载初始化数据
    var modules = []
    let initData = () => {
      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: '/init/read_modules',
        success: (res) => {
          modules = res
          creatElement(res)
        },
        error: (err) => {
          console.log(err)
        }
      })
    }
    // 创建checkbox选项
    let creatElement = (arr) => {
      console.log(arr)
      arr.map(item => {
        if (item.base) {
          $('.plat-deploy .plat-deploy-checkbox').append(`<span>${item.name}</span><input type="checkbox" checked disabled name="module" value="${item.key}" />`)
        } else {
          $('.plat-deploy .plat-deploy-checkbox').append(`<span>${item.name}</span><input type="checkbox" name="module" value="${item.key}" />`)
        }
      })
    }
    // 保存并发送已选项
    $('.submit').click(() => {
      let selectModules = new Array()
      $('input[name="module"]:checked').each((i, e) => {
        modules.map(item => {
          if (item.key === e.value) {
            selectModules.push(item)
          }
        })
      })
      $.ajax({
        type: 'post',
        dataType: "json",
        data: JSON.stringify(selectModules),
        contentType: "application/json; charset=utf-8",
        tradional: true,
        url: '/init/write_modules',
        success: (res) => {
          console.log('发送成功')
          $('.submit').text('请稍后...')
          $(".submit").prop('disabled', 'true')
          $('.info span').text(`配置中...`)
          timer = setInterval(()=> {
            getDeployState()
          }, 3000)
        },
        error: (err) => {
          console.log(err)
        }
      })
    })
    // 获取配置状态
    const getDeployState = () => {
      $.ajax({
        type: 'get',
        dataType: "json",
        url: '/init/launch',
        success: (res) => {
          if (res.newest) {
            $('.info span').text(`${res.newest}启动成功...`)
          } else {
            $('.info span').text(`请稍后...`)
          }
          if (res.complete) {
            clearInterval(timer)
            window.location.href="/auth/index.html"
          }
        },
        error: (err) => {
          console.log(err)
        }
      })
    }
  </script>
</body>
</html>